import React,{useContext,useMemo} from 'react';
import { PrimaryButton } from 'office-ui-fabric-react';
import {ColorContext,UPDATE_COLOR} from '../../components/HookCounter/colorContext';

export default function HookButtons(){
    // debugger
    const {dispatch} = useContext(ColorContext);

    const childrenTest =()=>{
        // debugger
        console.log('HookButtons 组件的函数执行了');
    }
    
    // const test = useMemo(()=>{return childrenTest()}, []);
    useMemo(()=>{return childrenTest()}, []);

    const handleClick = (_color) => {
        dispatch({type:UPDATE_COLOR,color:_color})
    }

    return (
        <>
            <PrimaryButton text='蓝色' onClick={()=>{handleClick('blue')}}/>
            <PrimaryButton text='紫色' onClick={()=>{handleClick('purple')}}/>
        </>
    );
}